<template>
    <div class="detail" id="detail">
        <div class="detail-title">
            <div class="shop-detail-title">
                <label @click="shopDetail">商品详情</label>
                <div :class="{'slide-selected': selectedDetail}"></div>
            </div>
            <div class="shop-detail-title">
                <label @click="shopSpec">规格参数</label>
                <div :class="{'slide-selected': selectedSpec}"></div>
            </div>
        </div>
        <div v-if="selectedDetail" class="detail-content">
            <img src="/src/assets/lunbo/image1.jpeg">
            <img src="/src/assets/lunbo/image1.jpeg">
            <img src="/src/assets/lunbo/image1.jpeg">
        </div>
        <div v-if="selectedSpec" class="spec-content">
            <div v-if="shopType === '手表'">
                <IntelWatch :shopId="shopId" />
            </div>
            <div v-if="shopType === '冰箱'">
                <!--引入对应的物品类型实现判断-->
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import IntelWatch from './shopType/IntelWatch.vue';

// 定义 props
const props = defineProps({
  shopId: Number, String
});
console.log(props);

const shopType = ref("手表");
console.log(shopType);

const selectedDetail = ref(true);
const selectedSpec = ref(false);

const shopDetail = () => {
    selectedDetail.value = true;
    selectedSpec.value = false;
    alert("切换渲染商品详情");
}

const shopSpec = () => {
    selectedDetail.value = false;
    selectedSpec.value = true;
    alert("切换渲染商品规格");
}

</script>

<style scoped>
.detail {
    width: 100%;
    margin: auto;
    width: auto;
    background-color: white;
}

.detail-title {
    width: 100%;
    height: 30px;
}
.shop-detail-title {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    width: 50%;
    cursor: pointer;
    float: left;
    padding-top: 2px;
}
.shop-detail-title .slide-selected {
    border-top: 4px solid #4a86e8; 
    width: 20%;
    padding-top: 0px;
    margin-top: 0px;
    border-radius: 50px;
    margin: auto;
    transform: translateY(0);
}

/*商品详情*/
.detail-content {
    width: auto;
}
.detail-content img {
    width: 100%;
    display: flex;
    grid-auto-flow: column;
    overflow: hidden;
}

</style>